<style>
    .error{
        color:red;
    }
</style>
<div class="panel panel-default">
    <div class="panel-heading">增加黑名单</div>
    <div class="panel-body">
        <form id="addForm" class="form-horizontal">
            <div class="form-group">
                <label for="danwei_name" class="col-sm-2 control-label">申请单位信息</label>
                <div class="col-sm-10">
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" for="danwei_name">单位名称</button>
                            </span>
                        <input type="text" class="form-control" id="danwei_name" name="danwei_name" tabindex="1"
                               placeholder="填写单位名称...">
                    </div>
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" for="fuzheren_name">负责人姓名</button>
                            </span>
                        <input type="text" class="form-control" id="fuzheren_name" name="fuzheren_name"  tabindex="2"
                               placeholder="填写负责人姓名...">
                        <span class="input-group-btn">
                                <button class="btn btn-default" type="button" for="fuzheren_tel">负责人电话</button>
                            </span>
                        <input type="text" class="form-control" id="fuzheren_tel" name="fuzheren_tel"  tabindex="3"
                               placeholder="填写负责人电话...">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="point" class="col-sm-2 control-label">违章地址</label>
                <div class="col-sm-10">
                    <div class="input-group">
                            <span class="input-group-btn" style="weight:auto;">
                                <button class="btn btn-default" type="button" for="daolu">广东省中山市小榄镇</button>
                            </span>
                        <select class="form-control" id="daolu" name="daolu">
                            <option value="">请选择道路</option>
                            <foreach name="daoluData" item="vo">
                                <option value="{$vo.name}">{$vo.name}</option>
                            </foreach>
                        </select>
                    </div>
                    <div class="input-group col-sm-12">
                        <input type="text" class="form-control" id="point" name="point" placeholder="填写详细地址..." >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="reason" class="col-sm-2 control-label">违章原因</label>
                <div class="col-sm-10">
                    <textarea type="text" class="form-control" id="reason" name="reason" placeholder="请填写违章原因"  tabindex="5"
                              rows="5"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="addBtn" class="col-sm-2 control-label"></label>
                <div class="col-sm-11">
                    <button type="button" id="addBtn" class="btn btn-primary">确定</button>&nbsp;&nbsp;
                    <a href="__URL__" class="btn btn-default" data-dismiss="modal">取消</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery-validate/1.13.1/jquery.validate.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("#addForm").validate({
            errorPlacement: function(error, element) {
                // Append error within linked label
                $( element )
                    .closest( "form" )
                    .find( "label[for='" + element.attr( "id" ) + "']" )
                    .append( error );
                $( element )
                    .closest( "form" )
                    .find( "button[for='" + element.attr( "id" ) + "']" )
                    .append( error );
            },
            errorElement: "span",
            rules: {
                danwei_name: {
                    required: true,
                    maxlength: 20
                },
                fuzheren_name: {
                    required: false,
                    maxlength: 20
                },
                fuzheren_tel: {
                    required: false,
                    maxlength: 20
                },
                point: {
                    required: true,
                    maxlength: 20
                },
                reason: {
                    required: true,
                    maxlength: 200
                },
                daolu: {required: true,maxlength: 50},

            },
            messages: {
                daolu: {required: "<span>(*必填)</span>",maxlength: "不超过50个字符"},
                danwei_name: {
                    required: "<span>(*必填)</span>",
                    maxlength: "单位名称不超过20个字符"
                },
                fuzheren_name: {
                    required: "<span>(*必填)</span>",
                    maxlength: "负责人姓名不超过20个字符"
                },
                fuzheren_tel: {
                    required: "<span>(*必填)</span>",
                    maxlength: "负责人电话不超过20个字符"
                },
                point: {
                    required: "<span>(*必填)</span>",
                    maxlength: "违章地址不超过20个字符"
                },
                reason: {
                    required: "<span>(*必填)</span>",
                    maxlength: "违章原因不超过200个字符"
                }
            }
        });
        $("#addBtn").on("click",function(){
            if($("#addForm").valid()){
                var formData = $("#addForm").serialize();
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "__URL__/addAjax",
                    data: formData,
                    success: function onSuccess(data, status)
                    {
                        if(data.code > 0 ){
                            alertMsg(data.msg, {icon:'warning'});
                        }
                        else{
                            alertMsg(data.msg, {icon:'succeed',timeoutFun:function(){
                                window.location.href = "__URL__";
                            }});
                        }
                    },
                    error: function onError(data, status)
                    {
                        // handle an error
                    }
                });
            }
            return false;
        });
    });
</script>